<script setup lang="ts">
import { ref, reactive, watch, nextTick, onMounted } from "vue";
import {
  Search,
  Plus,
  EditPen,
  Delete,
  Refresh,
  CirclePlus
} from "@element-plus/icons-vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { patrolProjectTable } from "./utils/definition";
import addAndEditTableAialog from "./dialog/addAndEditTableAialog.vue";
import addAndEditRootAialog from "./dialog/addAndEditRootAialog.vue";
const addAndEditRootShow = ref(false);
const addAndEditTableShow = ref(false);
import { message } from "@/utils/message";
const treeList = ref([
  {
    id: 1,
    label: "Level one 1",
    children: null
  },
  {
    id: 2,
    label: "Level one 2",
    children: null
  },
  {
    id: 3,
    label: "Level one 3",
    children: null
  }
]);
const tree = ref(null);
const dialogTreeVisible = ref(false);
const dialogTableVisible = ref(false);
const { columns } = patrolProjectTable();
const defaultProps = {
  children: "children",
  label: "label"
};
const pagination = reactive({
  pageSize: 20,
  currentPage: 1,
  pageSizes: [20, 40, 60],
  total: 0,
  align: "right",
  background: true,
  size: "default"
});
const listQuery = reactive<any>({
  limit: 10,
  page: 1,
  dataSetName: ""
});
const tableListData = ref([
  {
    id: 1,
    abilityCode: "cccc",
    abilityName: "xxxxxxxxx",
    dataType: "1"
  }
]);
const listLoading = ref(false);
const treeInfo = ref({});
const tableInfo = reactive<any>({});
const searchBtn = () => {
  getTreeList();
};
const getTreeList = () => {};
const addRoot = () => {
  //新增根节点
  treeInfo.value = {};
  console.log(treeInfo, "info");
  addAndEditRootShow.value = true;
};

const handleNodeClick = (data: any) => {
  treeInfo.value = data;
  console.log(treeInfo.value, "info");
};
const append = (data: any) => {
  treeInfo.value = data;
  addAndEditRootShow.value = true;
};
const remove = (node, data) => {
  //需要判断你一下是否能被删除
  // 可以删除
  treeInfo.value = data;
  dialogTreeVisible.value = true;
};

const searchTableBtn = () => {};
const addTbale = () => {
  if (treeList.value.length > 0) {
    addAndEditTableShow.value = true;
  } else {
    message("请先创建巡更项目类型", { type: "error" });
  }
};
const resetSearch = () => {
  listQuery.dataSetName = "";
  init();
};
const handleSizeChange = (val: any) => {
  pagination.pageSize = val;
  listQuery.limit = val;
  init();
};
const handleCurrentChange = (val: any) => {
  pagination.currentPage = val;
  listQuery.page = val;
  init();
};

const init = () => {};
const handleUpdate = (row: object) => {};
const handleEditdate = (row: object) => {
  tableInfo.length = 0;
  Object.assign(tableInfo, row);
  addAndEditTableShow.value = true;
};
const handleDelete = (row: object) => {
  //需要判断你一下是否能被删除
  // 可以删除
  tableInfo.length = 0;
  Object.assign(tableInfo, row);
  dialogTableVisible.value = true;
};
const handleCancel = () => {
  dialogTreeVisible.value = false;
};
const handSave = () => {};
const handleTableCancel = () => {
  dialogTableVisible.value = false;
};
const handTableSave = () => {};
const handleRefresh = () => {
  getTreeList();
};
</script>

<template>
  <div>
    <basic-layout
      :treeData="treeList"
      :defaultProps="defaultProps"
      :buttonInfo="{ type: 'primary', name: '新增', icon: Search }"
      :treeButtonInfo="{ edit: true, remove: true }"
      @nodeClick="handleNodeClick"
      @delete-node="remove"
      @edit-node="append"
      @addTreeRoot="addRoot"
    >
      <!-- 如果自定义树内容 -->
      <!-- 树结构操作按钮 -->
      <template #search>
        <div class="search-left">
          <el-form :model="listQuery" inline>
            <el-form-item>
              <el-input v-model="listQuery.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="search-right">
          <el-button :icon="CirclePlus" type="primary" @click="addTbale">
            新增
          </el-button>
        </div>
      </template>
      <!-- 表格 -->
      <template #tableContent>
        <PureTableBar title="列表设置" :columns="columns" @refresh="init">
          <template v-slot="{ size, dynamicColumns }">
            <pure-table
              ref="tableRef"
              row-key="id"
              adaptive
              table-layout="auto"
              :loading="listLoading"
              :size="size"
              :data="tableListData"
              :columns="dynamicColumns"
              :pagination="{ ...pagination, size }"
              :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }"
              @page-size-change="handleSizeChange"
              @page-current-change="handleCurrentChange"
            >
              <template #operation="{ row }">
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  @click="handleUpdate(row)"
                >
                  查看
                </el-button>
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  @click="handleEditdate(row)"
                >
                  修改
                </el-button>
                <el-button
                  class="reset-margin"
                  link
                  type="danger"
                  @click="handleDelete(row)"
                >
                  删除
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </template>
    </basic-layout>
    <!--tree删除-->
    <el-dialog v-model="dialogTreeVisible" title="提示" width="560">
      <div class="title">您确定删除该类型吗?</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handSave"> 确定</el-button>
        </div>
      </template>
    </el-dialog>
    <!--    table删除-->
    <el-dialog v-model="dialogTableVisible" title="提示" width="560">
      <div class="title">您确定删除该巡更项目吗?</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleTableCancel">取消</el-button>
          <el-button type="primary" @click="handTableSave"> 确定</el-button>
        </div>
      </template>
    </el-dialog>
    <addAndEditRootAialog
      v-if="addAndEditRootShow"
      :visible="addAndEditRootShow"
      :treeInfo="treeInfo"
      @update:visible="addAndEditRootShow = $event"
      @refresh="handleRefresh"
    />
    <addAndEditTableAialog
      v-if="addAndEditTableShow"
      :visible="addAndEditTableShow"
      :treeInfo="treeInfo"
      :tableInfo="tableInfo"
      @update:visible="addAndEditTableShow = $event"
      @refresh="handleRefresh"
    />
  </div>
</template>

<style scoped lang="scss">
@import url("@/style/common.scss");
.main {
  height: 100%;
  display: flex;
  justify-content: space-between;
  .main-left {
    width: 264px;
    height: 100%;
    background-color: var(--el-bg-color);
    margin-right: 16px;
    &-top {
      margin: 16px;
      .button {
        width: 100%;
        margin-top: 16px;
      }
    }
    &-tree {
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
      }
    }
  }
  .main-right {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    &-top {
      border-radius: 3px 3px 3px 3px;
      background-color: var(--el-bg-color);
      height: 68px;
      margin-bottom: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      &-left {
        display: flex;
        align-items: center;
      }
      &-right {
      }
    }
    &-container {
      flex: 1;
      border-radius: 3px 3px 3px 3px;
      //padding: 16px;
      background-color: var(--el-bg-color);
    }
  }
}
</style>
